<template>
  <div class="filter-wrap">
    <div class="filter-line">
      <div class="filter-item">
        <div class="label">姓名</div>
        <input v-model="filter.name" type="text" />
      </div>
      <div class="filter-item">
        <div class="label">性别</div>
        <select v-model="filter.sex">
          <option
            v-for="item in $options.sexOptions"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </option>
        </select>
      </div>
      <div class="filter-item">
        <div class="label" ref="lv">权限</div>
        <select v-model="filter.lv">
          <option
            v-for="item in $options.lvOptions"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </option>
        </select>
      </div>
    </div>
    <div>
      <button @click="handleSearch">搜索</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

<script>
import {  SEX_OPTIONS, LV_OPTIONS, DEFAULT_FILTER } from "./../../config";
// import { post } from "./../../../../utils/request";
export default {
    name: 'filters',
    data:function() {
        return {
            filter: {
                ...DEFAULT_FILTER,
            },
        };
    },
    props: ['updateUserList','getTableDataSource'],
    methods: {
        // 点击搜索后的回调
        handleSearch: function () {
            this.getTableDataSource(this.filter);
        },
        reset: function () {
            this.filter = {
                ...DEFAULT_FILTER,
            };
        },
    },
    // 尽可能减少不必要的data，以减少VM绑定器带来的损耗。
    sexOptions: SEX_OPTIONS,
    lvOptions: LV_OPTIONS,

};
</script>

<style scoped>
.filter-wrap {
  padding: 10px;
}
.item-btn {
  color: deepskyblue;
  margin-right: 10px;
}
.filter-line {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.label {
  display: flex;
  padding-right: 5px;
  justify-content: flex-end;
}
.table-item {
  display: flex;
  align-items: center;
}
.table-top {
  display: flex;
  background: #ddd;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-name {
  flex: 4;
}
.table-sex {
  flex: 3;
}
.table-lv {
  flex: 3;
}
.table-edit {
  flex: 5;
}
</style>
